<form (ngSubmit)="submit()" [formGroup]="formChangePassword" class="h-100 d-flex justify-content-center flex-column">
  <div class="d-flex justify-content-center">
    <div class="container">
      <div class="row">
        <div class="col"></div>
        <div class="col-6">
          <div *ngIf="messageError" class="text-danger">
            {{messageError}}
          </div>
        </div>
        <div class="col"></div>
      </div>
    </div>
  </div>
  <div class="text-center mb-5">Change password</div>
  <app-input-module
    class="mb-3"
    [formGroup]="formChangePassword"
    [controlName]="controlsName[0]"
    label="Password"
    placeholder="Input your password"
    type="password"
    messageError="Your password is invalid"/>
  <app-input-module
    class="mb-3"
    [formGroup]="formChangePassword"
    [controlName]="controlsName[1]"
    label="Retry password"
    placeholder="Input your password retry"
    type="password"
    messageError="Your password doesn't match"
    [isViewMessageError]="isViewRetryPassword"/>
  <div class="d-flex justify-content-center">
    <div class="container">
      <div class="row">
        <div class="col"></div>
        <div class="col-6">
          <button type="submit"
                  [disabled]="formChangePassword.invalid ||
                  this.formChangePassword.get('password')?.value !== this.formChangePassword.get('passwordRetry')?.value"
                  class="btn btn-primary me-2">
            change password
          </button>
        </div>
        <div class="col"></div>
      </div>
    </div>
  </div>
</form>
